window.addEventListener('load',function(){
  //定时器变量cxy965.com
  var timer;
//判断定时器是否开启，false没有开启，true表示开启
  var timerFlag = false;
//定时器启动1.5秒后停止
  var timerCount = 0;
//获取index.html中所有class为".my-photo"的img
  var imgs;
//img的数量，避免重复获取长度，在init函数中初始化
  var imgsLength;
//下一张未显示图片的下标
  var currentId = 0;

  init();
  window.onscroll = startTimer;
  window.onresize = startTimer;

//onload时调用
  function init(){
//获取所有的图片
    imgs = document.querySelectorAll('.my-photo');
    imgsLength = imgs.length;
    checkImgs()
  }

//开启定时器
  function startTimer(){
    //如果已经加载完所有图片则不开启定时器
    if(currentId >= imgsLength){
      return;
    }

    //timerCount重新从0开始计数
    timerCount = 0;
    if(timerFlag == false){
      timer = setInterval(checkImgs
          ,100);
      timerFlag = true;
    }
  }

//停止定时器
  function stopTimer(){
    if(timerFlag == true){
      clearInterval(timer)
      timerFlag = false
    }
  }

//判断图片是否出现在视窗内
  function isInSight(el) {
    const bound = el.getBoundingClientRect();
    const clientHeight = window.innerHeight;
    //这里只判断高度
    return bound.bottom <= clientHeight+20;
  }

//设置el的src属性
  function loadImg(el) {
    if (!el.src) {
      const source = el.dataset.src;
      el.src = source;
    }
  }



//判断哪些图片在视窗内，如果在视窗内则显示出来
  function checkImgs() {
    //如果定时器启动，1秒后关闭定时器
    if(timerFlag == true){
      if(timerCount >= 10){
        stopTimer();
      }else {
        timerCount += 1
      }
    }

    for (let i = currentId; i < imgsLength; i++) {
      if ( imgs[i].getAttribute("flag") == null && isInSight(imgs[i])) {
        //currentId是下一张未显示图片的下标
        currentId = i+1;
        loadImg(imgs[i]);
        imgs[i].setAttribute("flag","1");
      }
      //有一个不满足说明后面都不满足
      else if(imgs[i].getAttribute("flag") == null){
        break;
      }
    }
  }

})
